<!DOCTYPE html>
<!-- 删除 lang="en" 取消浏览器自动翻译成婴儿你 -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引用字体图标css -->
    <link rel="stylesheet" href="./fonts/icomoon.css" />
    <!-- 引用自己的css -->
    <link rel="stylesheet" href="./css/myindex.css" />
  </head>
  <body>
    <!-- 头部 logo -->
    <header>
      <img src="./images/logo.png" alt="" class="header_logo" />
    </header>
    <div class="container">
      <!-- 内容左边 -->
      <div class="container_left">
        <!-- 设备 -->
        <div class="device panel">
          <div class="device_item">
            <h3 class="device_number">2,190</h3>
            <div class="device_text">
              <i class="icon-dot"></i><span>设备总数</span>
            </div>
          </div>
          <div class="device_item">
            <h3 class="device_number">190</h3>
            <div class="device_text">
              <i class="icon-dot"></i><span>季度新增</span>
            </div>
          </div>
          <div class="device_item">
            <h3 class="device_number">3,001</h3>
            <div class="device_text">
              <i class="icon-dot"></i><span>运营设备</span>
            </div>
          </div>
          <div class="device_item">
            <h3 class="device_number">180</h3>
            <div class="device_text">
              <i class="icon-dot"></i><span>异常设备</span>
            </div>
          </div>
        </div>
        <!-- 故障设备监控 -->
        <div class="monitoring panel">
          <div class="panel_title">
            <h3 class="panel_h3">故障设备监控</h3>
            <div class="line"></div>
            <h3 class="panel_h3 dis_active">异常设备监控</h3>
          </div>
          
        </div>
        <!-- 点位分布统计 -->
        <div class="point panel">点位分布统计</div>
      </div>

      <!-- 内容中间 -->
      <div class="container_center">
        <!-- 迁徙图 -->
        <h3 class="migrate_title"><i class="icon-cube"></i> 设备数据统计</h3>
        <div class="migrate_map">迁徙图</div>
        <!-- 全国用户总量统计 -->
        <div class="user panel">全国用户总量统计</div>
      </div>

      <!-- 内容右边 -->
      <div class="container_right">
        <!-- 订单 -->
        <div class="order panel">订单</div>

        <!-- 销售额 -->
        <div class="sale panel">销售额</div>

        <!-- 渠道 -->
        <div class="distribute">
          <!-- 渠道分布 -->
          <div class="channel panel">渠道分布</div>

          <!-- 进度 -->
          <div class="progress panel">进度</div>
        </div>

        <!-- 全国热榜 -->
        <div class="hot panel">全国热榜</div>
      </div>
    </div>
  </body>
</html>
